
import { Cascader } from 'antd';
import React, { useState, useEffect, Form, useRef } from 'react';
import { apiGetDBAreaList, apiAreaGetAreaTree } from "@/request/callServicer/serveList";

const App = (props) => {

    const [options, setOptions] = useState([]);
    const [city, setCity] = useState([]);
    const getList = async (areaParentId = "", level = 1) => {
        let res = await apiAreaGetAreaTree({ areaParentId, level })
        return res.data
    }
    //页面初始化请求一级目录
    useEffect(async () => {
        let res = await apiAreaGetAreaTree()
        setOptions(res.data)
    }, []);

    useEffect(async () => {
        setCity(props.citys)
    }, [props.citys]);

    useEffect(() => {
    }, [city]);
    const onChange = (value, selectedOptions) => {
        setCity(value)
        props.onChange(selectedOptions)
    };
    const loadData = async (selectedOptions) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        let data = await getList(targetOption.value, targetOption.level + 1)
        const option = data.map(item => {
            return {
                value: item.areaId,
                label: item.areaName,
                level: targetOption.level + 1,
                isLeaf: targetOption.level == 2,
            }
        })
        targetOption.loading = false;
        targetOption.children = option
        setOptions([...options]);
    };
    const handleAreaClick = (e, label, option) => {
        e.stopPropagation();
        console.log('clicked', label, option);
    };
    const displayRender = (labels, selectedOptions) =>
        labels.map((label, i) => {
            const option = selectedOptions[i];
            return <span key={option.value}>{label}</span>;
        });

    return (<>{
        (city.length > 0 || !props.disabled) && options.length > 0 && <Cascader options={options} displayRender={displayRender} onChange={onChange} value={city} changeOnSelect multiple  disabled={props.disabled} />
    }</>)
};
export default App;